/*********************************************************************************
 * Copyright (C) 2011-2013 X2Engine Inc. All Rights Reserved.
 *
 * X2Engine Inc.
 * P.O. Box 66752
 * Scotts Valley, California 95067 USA
 *
 * Company website: http://www.x2engine.com
 * Community and support website: http://www.x2community.com
 *
 * X2Engine Inc. grants you a perpetual, non-exclusive, non-transferable license
 * to install and use this Software for your internal business purposes.
 * You shall not modify, distribute, license or sublicense the Software.
 * Title, ownership, and all intellectual property rights in the Software belong
 * exclusively to X2Engine.
 *
 * THIS SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EITHER
 * EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE, AND NON-INFRINGEMENT.
 ********************************************************************************/

h2 .x2-button {
	margin:0 0 0 5px;
}

div.x2-layout {
	width:auto;
	margin-bottom:5px;
	overflow:hidden;
	border:1px solid #ccc;
	background:#fafafa;
	-moz-border-radius:		4px;
	-o-border-radius:		4px;
	-webkit-border-radius:	4px;
	border-radius:			4px;
/* 	-moz-box-shadow:		0 1px 6px rgba(0,0,0,0.5);
	-webkit-box-shadow:		0 1px 6px rgba(0,0,0,0.5);
	box-shadow:				0 1px 6px rgba(0,0,0,0.5); */
}

/* #main-column.half-width {border-right:1px solid #aaa;margin-right:-1px;} */
/* .history.half-width {box-sizing:border-box;border-left:1px solid #aaa;} */

div.half-width {
	width:65%;
	float:left;
}
#main-column {margin-top:5px;}
#main-column > div, #main-column > form {margin:0 5px 5px 5px;}
.history {padding:0 5px;}
.history.half-width {padding:0;}
.history.half-width > div, .history.half-width > form {margin:0 5px 5px 0;}

#main-column > div.page-title-fixed-outer {margin:0 0 5px 0;/* padding-right:7px; */}
#main-column.half-width > div.page-title-fixed-outer {padding-right:10px;}
/* .history.half-width > div, .history.half-width > form {padding-right:10px;margin-right:-10px;} */

div.half-width > div.page-title, #main-column > div.page-title {margin-left:0;}
div.half-width > div.form {background:#fff;}
div.x2-layout a {text-decoration:none;}
div.x2-layout a:hover {text-decoration:underline;}
/* Form Sections */
div.x2-layout .formSection {
	/* background:#fff; */
	overflow:hidden;	/* disable */
	/*border-top:1px solid #333;*/
}
div.x2-layout .formSection:first-child {
	border-top:none;
}
div.x2-layout .tableWrapper {
	/*margin-left:16px;*/
	width:auto;
	/*border-left:1px solid #aaa;*/
	border-top: 1px solid #ccc;
	margin-bottom:-1px;
	margin-right:-1px;
}

div.x2-layout .tableWrapper.noTitle{
	border-top: none;
}

/* div.x2-layout .formSection hr {height:1px;margin:-1px 0 0 0;position:relative;background-color:#999;border-color:#999;} */
div.x2-layout .formSection:first-child {
	-moz-border-radius:		3px 0 0 0;
	-o-border-radius:		3px 0 0 0;
	-webkit-border-radius:	3px 0 0 0;
	border-radius:			3px 0 0 0;
}
div.x2-layout .formSection:last-child {
	-moz-border-radius:		0 0 0 3px;
	-o-border-radius:		0 0 0 3px;
	-webkit-border-radius:	0 0 0 3px;
	border-radius:			0 0 0 3px;
}
div.x2-layout .formSectionHeader {
	/*float:left;*/
	display:block;
	/*background: black;*/
	height:16px;
	border-top: 1px solid #ccc;
	-moz-border-radius:		4px 4px 0 0;
	-o-border-radius:		4px 4px 0 0;
	-webkit-border-radius:	4px 4px 0 0;
	border-radius:			4px 4px 0 0;
}
div.x2-layout .formSection:first-child .formSectionHeader {
	border-top: none;
}
div.x2-layout .showSection .formSectionHeader {
	display:block;
	/*width:15px;*/
}
div.x2-layout .formSectionHeader a {
	display:none;
	float:left;
	/* margin-right:1px; */
	/*width:16px;*/

	font-size:12px;
	font-style:normal;
	text-decoration:none;
	text-align:center;
	/* margin-bottom:-5px; */
}

div.x2-layout .sectionTitle {

	/*filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.0, M12=1.0, M21=-1.0, M22=0.0); /* IE6, IE7 */
	margin-left: 2px;

	display:inline-block;
	white-space:nowrap;
	padding-right:5px;

	color:#000;
	font-weight:normal;
	font-style:italic;
	font-size:11px;
}
div,.x2-layout .collapsible .sectionTitle {padding-right:0;}

div.x2-layout .showSection .sectionTitle {

	height:15px;

	/*-webkit-transform-origin:	top left;
	-moz-transform-origin:		top left;
	-o-transform-origin:		top left;
	-ms-transform-origin:		top left;
	transform-origin:			top left;*/
	/*-webkit-transform:	rotate(270deg) translate(-100%,0);
	-moz-transform:		rotate(270deg) translate(-100%,0);
	-o-transform:		rotate(270deg) translate(-100%,0);
	-ms-transform:		rotate(270deg) translate(-100%,0);
	transform:			rotate(270deg) translate(-100%,0);*/
}
.lt-ie9 div.x2-layout .showSection .sectionTitle {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

div.x2-layout .formSection a.formSectionShow {
	display:block;
	margin-left: 2px;
}
div.x2-layout .formSection a.formSectionHide {
	display:none;
	margin-left: 2px;
}
div.x2-layout .formSection.showSection a.formSectionShow {
	display:none !important;
	float: left;
	margin-left: 2px;
}
div.x2-layout .formSection.showSection a.formSectionHide {
	display:block !important;
	float: left;
	margin-left: 2px;
}


div.x2-layout .formSection table {
	position:relative;
	/* margin:-1px 0 0 0; */
/* 	border:1px solid #999;
	border-width:1px 0 0 0; */
	border-collapse:separate;
}
div.x2-layout .formSection:last-child table {margin-bottom:-1px;}
div.x2-layout td {
	overflow:hidden;	/* disable */
	margin:0;
	padding:0;
	vertical-align:top;
	border-right:1px solid #ccc;
	/* border-bottom:1px solid #999; */
	/* background:#eee; */
}
div.x2-layout td:last-child {border-right:none !important;}
div.x2-layout .formItem {	/* set field width in this element */
	/* position:relative; */
	float:left;
	/* white-space:nowrap; */
	overflow:hidden;	/* disable */
	margin-left:-1px;
	margin-right:-1000px;	/* css voodoo: row extends all the way across */
	padding-right:1000px;	/* and doesnt' mess up the flow */
	border:1px solid #ccc;
	border-width:0 0 1px 1px;
}
div.x2-layout .formItem.multiLine {overflow:hidden;}
div.x2-layout .formItem.checkBox {width:auto;}

/* div.x2-layout.form-view .formSectionHeader {border-top:1px solid #999;} */
div.x2-layout.form-view .formItem {border-width:0 0 0;}
div.x2-layout .formItem label {
	display:block;
	font-size:10px;
	color:#666;
	background:#eee;
}
div.x2-layout .formItem.noLabel label, div.x2-layout .formItem.inlineLabel label {display:none;}
div.x2-layout .formItem.topLabel label {
	padding:2px;
	margin-right:-1002px;	/* css voodoo: label extends all the way across */
	padding-right:1000px;	/* and doesnt' mess up the flow */
	border-bottom:1px solid #ccc;
}
div.x2-layout .formItem.leftLabel label {
	float:left;
	padding:3px 5px;
	/* height:20px; */
	padding-bottom:2003px;	/* equal height columns hack */
	margin-bottom:-2000px;	/* disable */
	text-align:right;
	width:70px;	/* 69 */
	vertical-align:middle;
	/* border:1px solid #ccc;
	border-right:none; */
	border-right:1px solid #ccc;
}
div.x2-layout .formItem.multiLine.leftLabel label {
	padding-bottom:2003px;
	margin-bottom:-2000px;
}

div.x2-layout .formItem label.groupLabel {
	background:none;
	display:inline;
	margin-left:5px;
}
div.x2-layout .formInputBox {
	float:left;		/* disable */
	/* width:auto; */
	/* margin-left:80px; */
	margin-right:1px;
	padding:3px;
	/* padding:0 10px 0 0; */

	padding-bottom:503px;	/* equal height columns hack */
	margin-bottom:-500px;	/* disable */
	/* margin-bottom:3px; */
	font-weight:bold;
}
div.x2-layout .formInputBox.textBox {font-weight:normal;}
div.x2-layout .formInputBox .checkboxWrapper {
	display:inline-block;
	vertical-align:middle;
	height:18px;
	padding:4px 0 0 4px;
	/* height: 20px;
	padding: 6px 6px 0 6px;
	background: white;
	border: 1px solid #CCC;
	border-radius: 0 3px 3px 0; */
}
div.x2-layout .formItem input[type="text"], div.x2-layout .formItem textarea, input[type="text"].relationships-add-autocomplete {
	-webkit-appearance:none;
	height:22px;
	width:100% !important;
	box-sizing:border-box;	/* disable */
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	/* box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.15); */
	border: 1px solid #aaa;
	/* border:1px solid #ccc; */
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	-moz-border-radius:		3px;
	-o-border-radius:		3px;
	-webkit-border-radius:	3px;
	border-radius:			3px;
/* 	-moz-border-radius:		0 3px 3px 0;
	-o-border-radius:		0 3px 3px 0;
	-webkit-border-radius:	0 3px 3px 0;
	border-radius:			0 3px 3px 0; */
	background:#fff;
}
div.x2-layout .formItem .placeholder {color:#aaa;}

div.x2-layout .formInputBox input {margin:0;padding:2px;}
div.x2-layout .formInputBox input[type="text"] {width:100%;}
div.x2-layout .formInputBox textarea {height:100%;resize:none;padding:2px;}
div.x2-layout .formInputBox select {width:100%;}
div.x2-layout .formInputBox input.input-percentage { background: #FFFFFF url(../images/formEditor/percentage.gif) no-repeat 95%;}

div.x2-layout .tableWrapper .grid-view table.items {clear:none;margin-top:0;}
div.x2-layout .tableWrapper .grid-view table.items {border:none;}


div.x2-layout div.error label,div.x2-layout label.error,div.x2-layout span.error {color:#C00;}
div.x2-layout div.error input,div.x2-layout div.error textarea,div.x2-layout div.error select,div.x2-layout input.error,div.x2-layout textarea.error,div.x2-layout select.error {
	background:#FEE !important;
	border-color:#C00 !important;
}
/* div.form div.success input,div.form div.success textarea,div.form div.success select,div.form input.success,div.form textarea.success,div.form select.success {
	background:#E6EFC2;
	border-color:#C6D880;
} */
div.x2-layout .errorSummary {
	background:#FEE;
	border:2px solid #C00;
	font-size:0.9em;
	padding:5px;
	margin-bottom:1px;
}
div.x2-layout .errorMessage {color:red;font-size:0.9em;}
div.x2-layout .errorSummary p {margin:0;padding:5px;}
div.x2-layout .errorSummary ul {margin:0;padding:0 0 0 20px;}






/* Editor CSS Begins Here */
div.x2-layout.editMode td {border:1px dashed #f00;border-width:1px 1px 1px 0;}
div.x2-layout.editMode .formSectionHeader {
	width:100%;
	background:#fff;
	float:none;
}
div.x2-layout.editMode .formSectionHeader a {
	display:inline;
	float:right;
	width:auto;
	margin:0 5px;
}
div.x2-layout.editMode .showSection .formSectionHeader a.formSectionShow {display:none;}
div.x2-layout.editMode .formSectionHeader a.formSectionHide {display:none;}


div.x2-layout.editMode .formSectionHeader .formSectionShow, div.x2-layout.editMode .formSectionHeader .formSectionHide {
	float:left;
}
div.x2-layout.editMode .showSection .sectionTitle {
	-webkit-transform:	none;
	-moz-transform:		none;
	-o-transform:		none;
	-ms-transform:		none;
	transform:			none;
}
.lt-ie9 div.x2-layout.editMode .showSection .sectionTitle {
	filter:none;
}
div.x2-layout.editMode .formTabOrder {
	display:none;
	top:0;
	right:0;
	position:absolute;
	z-index:10;
	height:15px;
	width:24px;
	background:#990000;
	font-size:11px;
	text-align:center;
	color:#fff;
	-moz-border-radius:		0 1px 0 4px;
	-o-border-radius:		0 1px 0 4px;
	-webkit-border-radius:	0 1px 0 4px;
	border-radius:			0 1px 0 4px;
}

div.x2-layout.editMode .formItem.selected {background:#90bede;}
div.x2-layout.editMode .formItem.selected label, div.x2-layout.editMode .formItem.selected input, div.x2-layout.editMode .formItem.selected textarea  {border-color:#64879f;background:#90bede;}

div.x2-layout.editMode .formItem.ui-sortable-helper {
	margin-right:0;
	padding-right:5px;
	border:1px solid #ccc;
	-moz-border-radius:		4px;
	-o-border-radius:		4px;
	-webkit-border-radius:	4px;
	border-radius:			4px;
}

div.x2-layout.editMode .formItemPlaceholder {
	float:left;
	margin:2px 3px;
	width:3px;
	height:24px;
	background:#66f0ff;
}
div.x2-layout.editMode .formSectionPlaceholder {
	width:auto;
	height:3px;
	background:#66f0ff;
}
div.x2-layout.editMode .formSortable {
	min-height:30px;
	overflow:auto;
}
div.x2-layout.editMode .formItem {
	margin:0;
	padding:0;
	margin-right:0;
	padding-right:0px;
}
div.x2-layout.editMode .formItem label.topLabel {
	padding:2px;
	margin:0;
}
div.x2-layout.editMode label.leftLabel {
	/* margin:0;
	padding:3px 5px;
	margin-bottom:0; */
}
div.x2-layout.editMode .formInputBox {
	margin:0;
	padding:3px;
	margin-bottom:0;
}


#formEditorControls, #fieldListTitle, .fieldListTitle {
	font-size:12px;
	display:block;
	padding:5px 5px;
	border-bottom:1px solid #666;
	background:#eee;
	-moz-border-radius:		4px 4px 0 0;
	-o-border-radius:		4px 4px 0 0;
	-webkit-border-radius:	4px 4px 0 0;
	border-radius:			4px 4px 0 0;
}
#formEditorControls {
	/* display:none; */
	position:relative;
	z-index:2;
	clip:rect(0px, 1000px, 1000px, 0px);
	margin-bottom:-1px;
	-moz-box-shadow:	0 0 10px 0 rgba(0,0,0,0.75);
	-webkit-box-shadow:	0 0 10px 0 rgba(0,0,0,0.75);
	box-shadow:			0 0 10px 0 rgba(0,0,0,0.75);
}
div.x2-layout.editMode #formEditorControls {margin-bottom:0;}
#formEditorControls a.x2-button {margin-bottom:0;}
#formEditorControls .formItemOptions {
	float:right;
	margin:0 5px 0 0;
	display:none;
}
#formEditorControls .formItemOptions input {
	width:13px;
	height:13px;
	padding:0;
	margin:0 10px 0 3px;
	vertical-align:bottom;
	position:relative;
	top:-3px;
	*overflow:hidden;
}
#formEditorControls .formItemOptions select {
	font-size:11px;
	margin:0;
	padding:0;
}

#fieldListBox {
	margin:0 0 10px 0;
	float:right;
	clear:right;
	width:200px;
	border:1px solid #ccc;
	-moz-border-radius:		4px;
	-o-border-radius:		4px;
	-webkit-border-radius:	4px;
	border-radius:			4px;
}
#editorFieldList {
	height:400px;
	padding:5px;
	overflow-y:scroll;
}

/* Individual form field box  */
#editorFieldList .formItem {
	float:none;
	margin:0 2px 2px 0;
	padding:4px;
	border:1px solid #ccc;
	-moz-border-radius:		4px;
	-o-border-radius:		4px;
	-webkit-border-radius:	4px;
	border-radius:			4px;
	background:#fafafa;
}
#editorFieldList .formItemPlaceholder {display:none;}
#editorFieldList .formInputBox {display:none;}
#editorFieldList label {
	color:#000;
	padding:1px 5px 1px 20px;
	font-size:12px;
	font-weight:normal;
}
#editorFieldList label.emailIcon, 		ul.fieldlist li label.emailIcon	{background:url(../images/formEditor/email_icon.gif)	2px 0px no-repeat transparent;}
#editorFieldList label.phoneIcon, 		ul.fieldlist li label.phoneIcon	{background:url(../images/formEditor/phone_icon.gif)	2px 0px no-repeat transparent;}
#editorFieldList label.booleanIcon, 	ul.fieldlist li label.booleanIcon	{background:url(../images/formEditor/boolean_icon.gif)	2px 0px no-repeat transparent;}
#editorFieldList label.dropdownIcon, 	ul.fieldlist li label.dropdownIcon	{background:url(../images/formEditor/dropdown_icon.gif)	2px 0px no-repeat transparent;}
#editorFieldList label.dateIcon, 		ul.fieldlist li label.dateIcon		{background:url(../images/formEditor/date_icon.gif)		2px	0px no-repeat transparent;}
#editorFieldList label.textIcon, 		ul.fieldlist li label.textIcon		{background:url(../images/formEditor/text_icon.gif)		2px	0px no-repeat transparent;}
#editorFieldList label.varcharIcon, 	ul.fieldlist li label.varcharIcon	{background:url(../images/formEditor/varchar_icon.gif)	2px 0px no-repeat transparent;}
#editorFieldList label.percentageIcon, 	ul.fieldlist li label.percentageIcon	{background:url(../images/formEditor/percentage_icon.gif)	2px 0px no-repeat transparent;}


/* Tab Order Mode */
#formEditor.tabOrderMode .formTabOrder {display:block;}

span.create-account, span#create-contact {
	font-size: 24px;
	font-weight: bold;
	vertical-align: middle;
	color: #579100;
	display: inline-block;
	cursor: pointer;
}

/* Custom CSS for Jquery UI Autocomplete */
.ui-autocomplete {
	max-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}
